<template>
  <layout>
    
        <div>
            <el-card shadow="hover" style="margin-bottom: 20px" v-for="(item, index) in project" :key="'project' + index">
                <div slot="header">
                    <el-row>
                        <el-col :span="16">
                            <span>
                                <g-link :to="'/project/' + item.node.id" style="text-decoration:none;cursor:pointer">
                                    <i class="el-icon-service"></i>&nbsp;&nbsp; {{item.node.name}}
                                </g-link>
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <div style="text-align: right;">
                                <g-link :to="item.node.htmlUrl">
                                <el-button style="padding: 3px 0" type="text" icon="el-icon-back">前往GitHub</el-button>
                                </g-link>
                                <el-button style="padding: 3px 0" type="text" icon="el-icon-share"></el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
                    最近更新 {{item.node.updateTime}}
                </div>
                <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;padding: 10px 0px 0px 0px">
                    {{item.node.description}}
                </div>
                <div style="font-size: 1.1rem;color: #303133;padding: 10px 0px 0px 0px">
                    <el-row>
                        <el-col :span="16" style="padding-top: 5px">
                            <el-tooltip effect="dark" :content="'star '+ item.node.stargazersCount" placement="bottom">
                                <i class="el-icon-star-off" style="margin: 0px 5px 0px 0px"></i>
                            </el-tooltip>
                            {{item.node.stargazersCount}}
                            <el-tooltip effect="dark"  :content="'watch '+item.node.watchersCount" placement="bottom">
                                <i class="el-icon-view" style="margin: 0px 5px 0px 15px"></i>
                            </el-tooltip>
                            {{item.node.watchersCount}}
                            <el-tooltip effect="dark" :content="'fork '+item.node.forksCount" placement="bottom">
                                <i class="el-icon-bell" style="margin: 0px 5px 0px 15px"></i>
                            </el-tooltip>
                            {{item.node.forksCount}}
                        </el-col>
                        <el-col :span="8" style="text-align: right;">
                            <el-tag size="small" type="danger" >{{item.node.license}}</el-tag>&nbsp;
                            <el-tag size="small" type="success">{{item.node.language}}</el-tag>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <!-- <div style="text-align: center">
                <el-pagination @current-change="list" background layout="prev, pager, next" :current-page.sync="query.page" :page-size="query.pageSize"
                    :total="query.pageNumber*query.pageSize">
                </el-pagination>
            </div> -->
            <pager :info="$page.project.pageInfo"/>
        </div>

        <!-- <el-card shadow="never" style="margin-bottom: 20px;padding: 20px 0px 20px 0px;text-align: center">
            <font style="font-size: 30px;color:#dddddd ">
                <b>还没有开源项目 (╯°Д°)╯︵ ┻━┻</b>
            </font>
        </el-card> -->
    <!-- </div> -->
  </layout>
</template>
<page-query>
query ($page: Int) {
  project: allStrapiProjects (perPage: 2, page:$page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        name
				htmlUrl
        updateTime
        stargazersCount
        watchersCount
        forksCount
        license
        language
      }
    }
  }
}
</page-query>
<script>
import { Pager } from 'gridsome'
export default {
  name: 'Project',
  metaInfo: {
    title: '海风如歌的博客 - 项目列表'
  },
  computed: {
    project () {
      return this.$page.project.edges
    }
  },
  mounted () {
    console.log(this.project, '项目数据 ')
  },
  components: {
    Pager
  }
}
</script>

<style>

</style>